:root {
  --rotation: 10deg;
  --rotationVal : 10;
  --opac: 0.0;
}

@font-face {
  font-family: myFont;
  src: url(barlowfold.otf);
}

@font-face {
  font-family: bodyText;
  src: url(Sen-VariableFont_wght.ttf);
  font-weight: 200;
}

body { font-family: MyFont; }

.scene {
  z-index: 0;
  position: absolute;
  left: 0vw;
  top: 0vw;
  width: 100vw;
  height: 100vh;
  perspective: 3000px;
  perspective-origin: 50vw 0vh;
  overflow: hidden;
  transition: opacity 1s;
  opacity: var(--opac);
}

.scene2 {
  z-index: -999;
  position: absolute;
  left: 0vw;
  top: 0vw;
  width: 100vw;
  height: 100vh;
  perspective: 3000px;
  perspective-origin: 50vw 0vh;
  overflow: hidden;
  transition: opacity 1s;
  opacity: var(--opac);
}

.bg img {
  z-index: -99999;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100vw;
  height: auto;
  transition: opacity 1s;
  opacity: var(--opac);
}

@media only screen and (hover: none) and (pointer: coarse){
  .bg img {
  top: 0px;
  }
}

.box {
  width: 100vw;
  height: 100vh;
  position: relative;
  transform-origin: 0vw 100vh 15vh;
  transform: translateZ( -15vh);
  transform-style: preserve-3d;
  transition: transform 1s;
}

@media only screen and (hover: none) and (pointer: coarse){
  .box {
  width: 100vw;
  height: 100vh;
  position: relative;
  transform-origin: 0vw 100vh 25vh;
  transform: translateZ( -15vh);
  transform-style: preserve-3d;
  transition: transform 1s;
}
}

.box.show-front  { transform: translateZ( -15vh) rotateY(   0deg); }
.box.show-back   { transform: translateZ( -50px) rotateY(-180deg); }
.box.show-right  { transform: translateZ(-10vw) rotateY( -20deg); }
.box.show-left   { transform: translateZ(-10vw) rotateY(20deg);}
/*.box.show-left   { transform: translateZ(-10vw) rotateY( calc(1deg * calc((asin(100 * var(--w)/(sqrt(pow(40 * var(--h),2) + pow(100 * var(--w),2)))))))); }*/
.box.show-top    { transform: translateZ(-10vh) rotateX( -40deg); }
.box.show-bottom { transform: translateZ(-100px) rotateX(  90deg); }

@media only screen and (hover: none) and (pointer: coarse){
  .box.show-top    { transform: translateZ(-25vh) rotateX( -30deg); }
  .box.show-front  { transform: translateZ( -25vh) rotateY(   0deg); }
  .box.show-left   { transform: translateZ(-10vw) rotateY(40deg);}
  .box.show-right   { transform: translateZ(-10vw) rotateY(-40deg);}
  }




.box__face {
  position: absolute;
  color: rgb(0, 0, 0);;
  text-align: center;
}

.cornerbutton {
  position :fixed;
  background-color: #2c78f9;
  font-size: 2vh;
  right: 0vw;
  width: 100vw;
  height: 5vh;
  top: 0px;
  text-align: left;
  color: rgb(255, 255, 255);
}

.cornerbutton p{
  position: relative;
  top: 0px;
  left: 2ex;
}


@media only screen and (hover: none) and (pointer: coarse){
  .cornerbutton  { height: 8vh; font-size: 5vh; line-height: 0px;}
  }


.box__face--front,
.box__face--back {
  width: 100vw;
  height: 100vh;
  /*line-height: 10vh;*/
}

.content {
  image-rendering: optimizeQuality;
  overflow: scroll;
  scrollbar-color: #2c78f9  #2c2c2c00;
  scrollbar-width: thin;
  display: block;
  flex-direction: column;
  position: absolute;
  top: 5vh;
  width: 100vw;
  height: 95vh;
}

@media only screen and (hover: none) and (pointer: coarse){
    .content  { max-height: 92vh; top: 8vh;}
  }

.game {
  display: flex;
  flex-direction: row;
  width: 95%;
  margin: 2.5%;
  font-family: bodyText;
}



@media only screen and (hover: none) and (pointer: coarse){
  .game { flex-direction: column;}
  }



.game_images {
  display: flex;
  flex-direction: row;
  overflow: scroll;
  width: 40%;
}

@media only screen and (hover: none) and (pointer: coarse){
  .game_images { width: 100%;}
  }


.game_images img{
  padding: 0 1vw 0 0;
  min-width: 95%;
}

.game_images img :last-child{
  padding: 0 0 0 1vw;
  min-width: 95%;
}

.game p {
  font-size: larger;
  text-align: left;
  margin: 0 1vw 0 1vw ;
  width: 60%;
}

.game a {
  color: #2c78f9;
}

@media only screen and (hover: none) and (pointer: coarse){
  .game p{ width: 100%; margin: 1vh 0vw; font-size: x-large;}
  }


.box__face--top {
  z-index: 100;
  position: absolute;
  background-color: #2c77f900;
  color: white;
  width: 100vw;
  height: 30vh;
  top:35vh;
  text-align: right;
  /*line-height: 100vh;*/
}

@media only screen and (hover: none) and (pointer: coarse){
  .box__face--top { width: 100vw; height: 50vh;top:25vh;}
  }


.index {
  position: absolute;
  z-index: 101;
  left: 15vw;
  bottom: 0px;
  font-size: 1.5vw;
  overflow: hidden;
  padding: 1vw;
  text-align: left;
}

@media only screen and (hover: none) and (pointer: coarse){
  .index   { font-size: 6vw;}
  }

.box__face--top h2{
  font-size: 4vh;
  line-height: 0vw;
  text-align: left;
}

@media only screen and (hover: none) and (pointer: coarse){
  .box__face--top h2 {font-size: 12vw;}
  }


.box__face--top a{
  display: block; color: white;  text-decoration: none;
}

.box__face--top img {
  position: absolute;
  bottom: 0px;
  left: 0vw;
  width: 26vw;
}

@media only screen and (hover: none) and (pointer: coarse){
  .box__face--top img {width: 52vw;}
  }

.box__face--top a.active { background-color: white; color: #2c78f9; }

.box__face--top a:hover:not(.active) { background-color: white; color: #2c78f9; }


.box__face--front  { background: hsl(0, 0%, 100%); }
.box__face--right  { background: hsla(209, 100%, 50%, 0); }
.box__face--back   { background: #2c78f9; }
.box__face--left   { background: hsl(212, 100%, 50%); }
.box__face--top    { background: #2c77f900; }
.box__face--bottom { background: hsla(300, 100%, 50%, 0.7); }

.box__face--front  { transform: rotateY(  0deg) translateZ( 15vh); }

@media only screen and (hover: none) and (pointer: coarse){
  .box__face--front {transform: rotateY(  0deg) translateZ( 25vh);}
  }


.box__face--left   { transform: translateX(-50vw) rotateY(-90deg);}
.box__face--top   { transform:  translateY(-50vh) rotateX(90deg);}

.spaceship_nose {
  display: flex;
  position: absolute;
  transform-origin: center;
  width: 80vw;
  left: 10vw;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(-7vh) translateY(-18vh) rotateX(40deg);
  pointer-events: none;
}

.spaceship_nose img {
  image-rendering: optimizeSpeed;
  align-self: center;
  max-width: 100%;
  pointer-events: none;
}
@media only screen and (hover: none) and (pointer: coarse){
  .spaceship_nose {
  width: 100vw;
  left: 0px;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(5vh) translateY(-38vh) rotateX(  30deg);
  pointer-events: none;
  }
  }

.spaceship {
  display: flex;
  position: absolute;
  transform-origin: center;
  width: 80vw;
  left: 10vw;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(-15vh) translateY(-10vh) rotateX(40deg);
  pointer-events: none;
}

.spaceship img {
  image-rendering: optimizeSpeed;
  align-self: center;
  max-width: 100%;
  pointer-events: none;
}
@media only screen and (hover: none) and (pointer: coarse){
  .spaceship {
  width: 100vw;
  left: 0px;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(0) translateY(-35vh) rotateX(  30deg);
  pointer-events: none;
  }
  }

.kids {
   display: flex;
  position: absolute;
  transform-origin: center;
  width: 80vw;
  left: 10vw;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(-18vh) translateY(-6vh) rotateX(40deg);
  pointer-events: none;
}

@media only screen and (hover: none) and (pointer: coarse){
  .kids {
  width: 100vw;
  left: 0px;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(-3vh) translateY(-33vh) rotateX(  30deg);
  pointer-events: none;
  }
  }

.kids img {
  image-rendering: optimizeSpeed;
  align-self: center;
  max-width: 100%;
  pointer-events: none;
}

.bridge {
   display: flex;
  position: absolute;
  transform-origin: center;
  width: 80vw;
  right: -10vw;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(-25vh) translateY(-6vh) rotateX(40deg);
  pointer-events: none;
}

@media only screen and (hover: none) and (pointer: coarse){
  .bridge {
    width: 150vw;
  right: -20vw;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(-10vh) translateY(-33vh) rotateX(  30deg);
  pointer-events: none;
  }
  }

  .bridge img {
  image-rendering: optimizeSpeed;
  align-self: center;
  max-width: 100%;
  pointer-events: none;
}